<template>
  <div class="comicClassifySubject">
    <div class="comicClassifyHeader">
      <van-icon name="arrow-left" @click="returnPage" />
      <font>分类</font>
    </div>
    <div class="comicClassifyMain">
      <div
        v-for="(item, index) in classList"
        :key="index"
        @click="toComicResult('kind', item.name, '1')"
      >
        <van-image round :src="item.imgPath" />
        <font>{{ item.name }}</font>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      classList: []
    };
  },
  created () {
    var list = [
      { name: '最近更新', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '玄幻', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '奇幻', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '恐怖', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '科技', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '惊悚', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '后宫', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '修仙', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '现代', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '都市', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '治愈', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '励志', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '心灵鸡汤', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '格斗', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' },
      { name: '搞笑', imgPath: 'http://mhfm7tel.cdndm5.com/42/41679/20200409101850_180x240_21.jpg' }
    ];
    this.classList = list;
  },
  methods: {
    returnPage () {
      this.$router.go(-1);
    },
    toComicResult (distinguish, kind, identification) {
      this.$router.push({
        path: '/comicResult',
        query: {
          kind: kind,
          distinguish: distinguish,
          identification: identification
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.comicClassifySubject {
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
}

.comicClassifySubject .comicClassifyHeader {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  i {
    font-size: 30px;
  }
  font {
    font-size: 20px;
    font-weight: bold;
  }
}
.comicClassifySubject .comicClassifyMain {
  flex: 1;
  width: 100%;
  height: 0;
  background-color: #ffffff;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 3px;
  div {
    width: 120px;
    height: 150px;
    float: left;
    margin-top: 2px;
    margin-right: 2px;
    margin-left: 2px;

    display: flex;
    flex-direction: column;
    align-items: center;
    .van-image {
      width: 100px;
      height: 100px;
    }
    font {
      font-size: 17px;
      font-weight: bold;
      margin-top: 3px;
    }
  }
}
</style>>
